yonayo3のページ HOME ICT

ＪａｖａＳｃｒｉｐｔ

プログラム言語は現在様々なものが存在する。 例えば，C，C++，C#，Java，PHP，Perl，BASIC などがプログラム言語である。
言語が変わっても，基本的な考え方は同じである。
JavaScript を使ってプログラムを記述してみよう。

(1) Web ページの基本的なタグ
HTML（HyperText Markup Language）は， Web ページを作成するための言語である。

<html>
<head>
<title>プログラム</title>
</head>
<body>


</body>
</html>
HTML タグは，
　　<開始タグ> ～ </終了タグ>
で内容を囲んで表す。

<head> ～ </head> で囲まれたヘッダ部分では， タイトルや作成者など，文書に関するヘッダ情報を示す。
<body> ～ </body>で囲まれたボディ部分が， 文書の本体になる。この部分に書かれた内容が，ブラウザ上に表示される。
HTML 文書では，ヘッダ部分とボディ部分を合わせた全体を
<html> ～ </html>で囲み， この文書が HTML 文書であることを定義する。

(2) Web ページの作成
実際に，Web ページを作成してみよう。
① メモ帳を起動する
「スタート」ボタン→「すべてのプログラム」→「アクセサリ」→「メモ帳」の順 で，起動する。
② タグを入力する
右の通りに入力する。タグはすべて半角文字。
③ 名前を付けて保存する
ドット（.）の後の拡張子 html を忘れずに付けて保存する。
ファイル名は，英数半角文字で付ける。 Web 上では，全角文字で書かれたファイルは認識されないので， 半角文字で表すことに慣れておこう。
ネット上で扱うファイル名は， 大文字を使わず小文字で表すのが一般的である。
④ ブラウザで表示する
保存したファイルをダブルクリックすると， Microsoft Edge（マイクロソフト エッジ）で表示される。

※ HTML を入力するアプリはいろいろあるので， それらを活用するとよい。
筆者は，「Visual Studio Code」を利用している。
① ②
<html>
<body>
<script>
document.write("JavaScript");
</script>
</body>
</html>

③
<html>
<body>
<script>
document.write("JavaScript＿");
document.write("JavaScript＿");
document.write("JavaScript＿");
</script>
</body>
</html>

④
<html>
<body>
<script>
for(i=1;i<=10;i++){
document.write("JavaScript＿");
}
</script>
</body>
</html>

⑤
<html>
<body>
<script>
m=prompt(“文字列を入力してください”);
for(i=1;i<=3;i++){
document.write(m);
document.write("<br>");
}
</script>
</body>
</html>

(3) JavaScript でプログラムを記述する
① SCRIPT タグ
JavaScript で記述する場所を，
<script> ～ </script>
で指定する。

② メッセージを表示する
「 document.write("～"); 」で， ～の部分がブラウザで表示される。
※注 文字は半角（つまり ASCII 文字）で入力する。

③ 文字列を3個表示する
右のように，「 document.write("～"); 」を3回記述して 文字列を3個表示させる。 文字列の後には，アンダーバーを付ける。
「Shift」+「ろ」でアンダーバー（＿）が表示される。

④ 文字列を10個表示する
for文を使って，10回繰り返して文字列を10個表示する。
「i=1 は，変数iに1を代入する」ことを表している。

for 文の構造
for(i=1;i<=10;i++){
document.write("JavaScript＿");
}

 for (初期値; 繰り返し条件 ; 値の増加方法 ) { 処理 }
初期値：変数ｉは初期値として 1 が代入される
繰り返し条件：i が 10 以下の場合，{ } の間が実行される
値の増加方法：１回 { } の間を実行すると変数 i の値が 1 増加する

⑤ prompt の利用（入力を読み取る）
prompt("説明文","入力枠に表示する文字");
prompt()は，入力ダイアログを表示して入力を求める命令である。
括弧内は，2つの区分があり，最初の部分は説明文を記入し， 後ろの部分は入力枠に表示する文字を指定する。
入力枠に何も表示させないので省略することができる。
HTMLファイルでは，タグ
は改行を表す。
（br は BReak（改行）の略）


プログラム作成の手順

① プログラムを作成するソフトウエアを起動する
② プログラムを入力して保存する
③ プログラムが動作するか確認する
④ 動作しない場合にプログラムを編集する
ここで，④のバグがないかデバッグすることが一番重要な作業になる。


演算子

JavaScript での計算では，次の演算子が準備されている。


ＪａｖａＳｃｒｉｐｔの構文

★　基本的な構文
① for 文
for(初期化;条件;増分値){
繰り返し行われる処理
}

例
for(i=1;i<10;i++){
document.write(i);
}

 この例では，0123456789 と表示される。

②　if 文
if(条件){
条件が真であれば実行する処理
}

if(条件){
条件が真のときに実行する処理
}else{
条件が偽のときに実行する処理
}

if(条件1){
条件1が真のときに実行する処理
}else if(条件2){
条件2が真のときに実行する処理
}else{
条件が偽のときに実行する処理
}

例
if ( n < 10 ) {
  alert("SMALL");
// 10 より小さければ SMALL を
} else if ( n > 20) {
  alert("BIG");
// 20 より大きければ BIG を
} else {
  alert("NORMAL");
// そうでなければ NORMAL を表示
}

※注
「alert( )」は，ダイアログでかっこ内を表示する命令
「document.write( )」は，ページ内に表示する命令
で，2つは表示の方法が異なる。




判断分岐と素数判定プログラム（練習問題）

素数を判定するプログラムを作成しよう。
（3以上の）自然数\(n\)を入力して， \(n\)が素数であるかどうかを判定するプログラム

素数\(p\)は，1と自分自身\(p\)のみを約数に持ち， 2以上\(p-1\)以下の整数と互いに素であり， 割り切れない。
入力された\(n\)に対して， \(n\)を2以上\(n-1\)以下の整数で割ったときの余りが すべて 0 でなければ\(n\)は素数ということになる。
素数を判定するアルゴリズムは， 右のフローチャートで表すことができる。


〔補足〕この程度の長さのプログラムであれば， プログラムをどのような記述しても 処理速度の大きな差は見られないが， 膨大なプログラムになると記述の仕方で処理速度が大きく変わる。
できるだけ処理が速く，正確なプログラムがよいプログラムと言えよう。
その点で言えば，
「for (i = 0; i < n ; i++) ③」
の「n-1」までの代わりに，
「Math.floor(Math.sqrt(n))」
としたら，少し処理が速くなる。

（関数の説明）Math.floor 関数は小数部を切り下げて返し ，Math.sqrt 関数は平方根を返す。
このことから，Math.floor(Math.sqrt(n) は [ \(\sqrt{n}\) ]（[ ] はガウス記号）を表す。




〔参考〕
前ページのアルゴリズムに従って， プログラムを作ると右のようになる。
空欄に入るプログラムを考えよう。

※「 parseInt 」は，文字列を整数に変換する。

今回のプログラムでは，途中の計算が表示されず結果のみ表示されるので， 途中計算が表示されると計算の過程がわかってよい。
そこで，④と⑤の間に，以下の命令を入れてみるとよい。
試してみて，それぞれの意味を考えよう。


document.write(i);
document.write(" で割った余りは ");
document.write(r);
document.write(" である");

↑